<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习与工作经历</title>
    <style>
        body {

            background-color: rgb(242, 243, 246);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
            margin-bottom: 30px;
            font-weight: bold;
            /* 加粗 */
        }


        th {
            background-color: #3498db;
            color: white;
            padding: 12px 15px;
        }

        td {
            padding: 10px 15px;

        }

        input {
            width: 98%;
            text-align: center;
            padding: 7px;
            font-size: 16px;
        }

        .button {
            /* 
            使用flex布局,当设置display: flex后
            容器内的子元素（Flex项目）默认沿着主轴（水平方向）排列
            */
            display: flex;
            width: 115px;
            margin: 10px auto;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>学习与工作经历</h1>
        <form action="" method="post">
            <table width="100%" cellspacing="0">
                <thead> <!-- thead 表格的头部，主动声明-->
                    <tr>
                        <th>序号</th>
                        <th>单位/学校</th>
                        <th>身份</th>
                        <th>证明人</th>
                        <th>联系方式</th>
                    </tr>
                </thead>
                <tbody id="exp_body"><!-- tbody 表格的主体，主动声明-->
                </tbody>
            </table>
            <div class="button"> <!--  为什么使用div？在</html>后(结尾)有解释  -->
                <input type="submit" value="保存提交" style="background-color: #3498db;">
                <input type="reset" value="恢复默认" style="background-color: #e74c3c;">
            </div>
        </form>
    </div>

    <script>

        var data = [
            {
                unit: "北京大学",
                position: "计算机科学专业学生",
                witness: "张教授",
                contact: "zhang@example.com"
            },
            {
                unit: "腾讯科技有限公司",
                position: "前端开发工程师",
                witness: "李经理",
                contact: "li@tencent.com"
            },
            {
                unit: "阿里巴巴集团",
                position: "高级产品经理",
                witness: "王总监",
                contact: "wang@alibaba.com"
            },
            {
                unit: "清华大学",
                position: "软件工程硕士",
                witness: "赵教授",
                contact: "zhao@tsinghua.edu.cn"
            }
        ];


        function get_td(str, name) {
            if (str == null || str == undefined) return "";
            var s = "<td>";
            s += "<input type=text value='" + str + "' name='" + name + "'>";
            s += "</td>";
            return s;
        }

        // 表格的创建
        // function get_td(str) {
        //     if (str == null || str == undefined)
        //         return "";
        //     var s = "<td>" + str + "</td>";
        //     return s;
        // }


        function get_tbody(data) {
            var str_body = "";
            for (var i = 0; i < data.length; i++) {
                var t = data[i];
                var str_tr = "<tr>";
                str_tr += get_td(i + 1, "index");
                str_tr += get_td(t['unit'], "unit");
                str_tr += get_td(t['position'], "position");
                str_tr += get_td(t['witness'], "witness");
                str_tr += get_td(t['contact'], "contact");
                str_tr += "</tr>";
                str_body += str_tr;
            }
            return str_body;
        }

        // exp_body 是 tbody的id,
        // innerHTML将tbody的内容替换为get_tbody(data)的返回值
        exp_body.innerHTML = get_tbody(data);
    </script>
</body>

</html>
<!-- 

在HTML中，元素分为块级元素(block)和内联元素(inline)，它们有不同的布局特性：

块级元素的特点：
    默认占据整行宽度
    可以设置宽度、高度、内外边距
    垂直排列（前后会换行）
    常见块级元素：<div>, <p>, <h1>-<h6>, <form>, <table>

内联元素的特点：
    只占据内容所需的空间
    不会强制换行
    不能设置宽度和高度（会被内容撑开）
    常见内联元素：<span>, <a>, <input>, <button>


想对内联元素设置宽度和高度，需要将其转换为块级元素。
1.设置display属性为block或inline-block来实现
2.用div包裹
 -->